<template>
  <div id="global-header">
    <el-page-header class="custom-header" icon="" title="智能化教学平台">
      <template #content>
  <div class="flex items-center">
    <el-avatar
      :size="35"
      class="mr-3"
      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    />
    <span class="text-large font-600 mr-3"></span>
    <span class="text-sm mr-2" style="color: var(--el-text-color-regular); margin-bottom: 10px; font-size: 20px;">
      大大怪先生
    </span>
    <el-tag>管理员教师</el-tag>
  </div>
</template>
      <template #extra>
        <div class="flex items-center">
          <el-button>个人信息</el-button>
          <el-button type="primary" class="ml-2">退出登录</el-button>
        </div>
      </template>
    </el-page-header>
  </div>
</template>

<script lang="ts" setup>
// 你的脚本代码
</script>

<style scoped>
#global-header .custom-header {
  padding: 10px 20px;
}
#global-header .custom-header :deep(.el-page-header__title) {
  font-size: 24px;
  font-weight: bold;
}
#global-header .custom-header :deep(.el-page-header__content) {
  display: flex;
  align-items: center;
  gap: 10px;
}
#global-header .custom-header :deep(.el-page-header__content .el-tag),
#global-header .custom-header :deep(.el-page-header__content .text-sm) {
  margin-bottom: 5px;
  margin-left: 0px;
  margin-right: 10px;
}
</style>